<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-simple
-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>Gender Semester Chart</title>
    <style>
        .newspaper
        {
            -moz-column-count:3; /* Firefox */
            -webkit-column-count:3; /* Safari and Chrome */
            column-count:3;
        }
    </style>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div class="newspaper">
<div id="container1" style="width: 600px; height: 400px;"></div>
<div id="container2" style="width: 600px; height: 400px;"></div>
    </div>
<div id="container3" style="width: 1000px; height: 400px;"></div>
<div id="container4" style="width: 1200px; height: 1000px;"></div>
<div id="container5" style="width: 1000px; height: 400px;"></div>
<div id="container6" style="width: 1000px; height: 400px;"></div>
<div id="container7" style="width: 1000px; height: 400px;"></div>
<div id="main3" style="width:35%;height:100%;float: left;" >
    <div id="main31" style="width: 100%;height:50%;float: left;background-color: white" ></div>
    <div id="main32" style="width: 100%;height:50%;float: left;background-color: white" ></div>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('container1'));
    var myChart2 = echarts.init(document.getElementById('container2'));
    var myChart3 = echarts.init(document.getElementById('container3'));
    var myChart4 = echarts.init(document.getElementById('container4'));
    var myChart5 = echarts.init(document.getElementById('container5'));

    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: "Session的访问步长分析",
            x: "center",
            link: ""
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            backgroundColor: "rgba(0,0,0,0.7)",
            textStyle: {
                color: "#fff"
            },
            axisPointer: {
                lineStyle: {
                    color: "rgb(41, 100, 142)"
                },
                areaStyle: {
                    type: "default"
                }
            }
        },
        legend: {
            orient: "vertical",
            x: "left",
            data: ["step_length_1_3_ratio", "step_length_4_6_ratio", "step_length_7_9_ratio", "step_length_10_30_ratio", "step_length_30_60_ratio"]
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: true
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        series: [
            {
                name: "ratio",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: [
                    {
                        value: 0.1,
                        name: "step_length_1_3_ratio"
                    },
                    {
                        value: 0.2,
                        name: "step_length_4_6_ratio"
                    },
                    {
                        value: 0.3,
                        name: "step_length_7_9_ratio"
                    },
                    {
                        value: 0.4,
                        name: "step_length_10_30_ratio"
                    },
                    {
                        value: 0.5,
                        name: "step_length_30_60_ratio"
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: "rgb(42, 55, 61)"
                            }
                        }
                    }
                }
            }
        ],
        animation: true
    };
    var option2 = {
        title: {
            text: "Session的访问时长分析",
            x: "center",
            link: ""
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            backgroundColor: "rgba(0,0,0,0.7)",
            textStyle: {
                color: "#fff"
            },
            axisPointer: {
                lineStyle: {
                    color: "rgb(41, 100, 142)"
                },
                areaStyle: {
                    type: "default"
                }
            }
        },
        legend: {
            orient: "vertical",
            x: "left",
            data: []
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: true
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        series: [
            {
                name: "ratio",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: [],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: "rgb(42, 55, 61)"
                            }
                        }
                    }
                }
            }
        ],
        animation: true
    };

    var option3 = {
        title: {
            text: "Top10热门品类统计",
            subtext: ""
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            }
        },
        legend: {
            data: ["点击量"]
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: true
                },
                magicType: {
                    show: false,
                    type: ["line", "bar", "stack", "tiled"]
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: "value"
            }
        ],
        yAxis: [
            {
                type: "category",
                data: []
            }
        ],
        series: [
            {
                name: "点击量",
                type: "bar",
                stack: "总量",
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: "insideRight"
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    color: function (params) {
                        var colorList = [
                            "#C1232B",
                            "#B5C334",
                            "#FCCE10",
                            "#E87C25",
                            "#27727B",
                            "#FE8463",
                            "#9BCA63",
                            "#FAD860",
                            "#F3A43B",
                            "#60C0DD",
                            "#D7504B",
                            "#C6E579",
                            "#F4E001",
                            "#F0805A",
                            "#26C0C0"
                        ];
                        return colorList[params.dataIndex % colorList.length];
                    }
                },
                data: []
            }
        ]
    };
    myChart3.setOption(option3);
    var option4 = {
        title: {
            text: "Top10热门品类统计",
            subtext: ""
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            }
        },
        legend: {
            data: ["点击量"]
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: true
                },
                magicType: {
                    show: false,
                    type: ["line", "bar", "stack", "tiled"]
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: "value"
            }
        ],
        yAxis: [
            {
                type: "category",
                data: []
            }
        ],
        series: [
            {
                name: "点击量",
                type: "bar",
                stack: "总量",
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: "insideRight"
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    color: function (params) {
                        var colorList = [
                            "#C1232B",
                            "#B5C334",
                            "#FCCE10",
                            "#E87C25",
                            "#27727B",
                            "#FE8463",
                            "#9BCA63",
                            "#FAD860",
                            "#F3A43B",
                            "#60C0DD",
                            "#D7504B",
                            "#C6E579",
                            "#F4E001",
                            "#F0805A",
                            "#26C0C0"
                        ];
                        return colorList[params.dataIndex % colorList.length];
                    }
                },
                data: []
            }
        ]
    };
    myChart4.setOption(option4);
    var option5 = {
        title: {
            text: '各区域 Top3 商品统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Rainfall', 'Evaporation']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                // prettier-ignore
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Rainfall',
                type: 'bar',
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ],
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            },
            {
                name: 'Evaporation',
                type: 'bar',
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ],
                markPoint: {
                    data: [
                        { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                        { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            }
        ]
    };
    myChart5.setOption(option5);


    // 使用刚指定的配置项和数据显示图表。

    //
    // 发送Ajax POST请求到Servlet获取数据
    $.post('getinformation', function(data) {

        // 提取数据项并创建一个适合 ECharts 的数据格式
        var dataItems2 = [];
        var dataItems3 = [];
        var dataItems4 = [];
        var dataItems5 = [];
        var dataItems6 = [];
        var dataItems7 = [];

        // 处理第一个 JSON 数组（用于 option2）
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            dataItems2.push({
                name: "vis", // 假设每个对象有一个名为 "stepLength1_3Ratio" 的属性
                value: item.stepLength1_3Ratio // 假设每个对象有一个名为 "stepLength1_3Ratio" 的属性
            });
            dataItems2.push({
                name: "stepLength4_6Ratio", // 属性名称作为数据项名称
                value: item.stepLength4_6Ratio // 属性值作为数据项值
            });
            dataItems2.push({
                name: "stepLength7_9Ratio", // 属性名称作为数据项名称
                value: item.stepLength7_9Ratio // 属性值作为数据项值
            });
            dataItems2.push({
                name: 'stepLength10_30Ratio', // 属性名称作为数据项名称
                value: item.stepLength10_30Ratio // 属性值作为数据项值
            });
            dataItems2.push({
                name: 'stepLength30_60Ratio', // 属性名称作为数据项名称
                value: item.stepLength30_60Ratio // 属性值作为数据项值
            });
            dataItems2.push({
                name: 'stepLength60Ratio', // 属性名称作为数据项名称
                value: item.stepLength60Ratio // 属性值作为数据项值
            });
        }

        // 处理第二个 JSON 数组（用于 option3）
        for (var i=1; i<11; i++) {
            var item1 = data[i];
            dataItems3.push({
                name: item1.taskId, // 属性名称作为数据项名称
                value: item1.clickCount // 属性值作为数据项值
            });
        }
        // 处理第三个 JSON 数组（用于 option3）
        for ( i; i <111; i++) {
            var item2 = data[i];
            dataItems4.push({
                name: item2.sessionId, // 属性名称作为数据项名称
                value: item2.clickCategoryId // 属性值作为数据项值
            });

        }
        // 处理第四个 JSON 数组（用于 option3）
        for (i ; i < 132; i++) {
            var item3 = data[i];
            dataItems5.push({
                name: item3.area,
                name1:item3.productId,// 属性名称作为数据项名称
                value: item3.clickCount // 属性值作为数据项值
            });
        }
        // 对数据进行分组并排序
        var groupedData = dataItems5.reduce(function(acc, item) {
            // 使用原始的item.name作为键
            var areaKey = item.name;
            // 创建一个新的对象，其中name是item.productId，value是item.value
            var newItem = {
                name: item.name1,
                value: item.value
            };

            // 如果acc中没有这个区域，则创建一个新数组
            if (!acc[areaKey]) {
                acc[areaKey] = [];
            }
            // 将新创建的对象推入到对应区域的数组中
            acc[areaKey].push(newItem);
            // 返回累加器对象
            return acc;
        }, {});


        // 更新 option2 的 series 数据
        option2.series[0].data = dataItems2;

        // 使用更新后的 option2 对象设置图表
        myChart2.setOption(option2); // 注意这里应该是 myChart2 而不是 myChart

        // 更新 option3 的 series 数据
        //
        // // 使用更新后的 option3 对象设置图表
        myChart3.setOption({
            yAxis: {
                data: dataItems3.map(function(item) {
                    return item.name; // 将每个数据项的name属性作为yAxis的数据
                })
            },
            series: [
                {
                    data:dataItems3.map(function(item) {
                        return item.value; // 将每个数据项的value属性作为series的数据
                    })
        }
            ]
        }); // 注意这里应该是 myChart3 而不是 myChart

        myChart4.setOption({
            xAxis: {
                data: dataItems4.map(function(item) {
                    return item.name; // 将每个数据项的name属性作为yAxis的数据
                })
            },
            series: [
                {
                    data:dataItems4.map(function(item) {
                        return item.value; // 将每个数据项的value属性作为series的数据
                    })
                }
            ]
        });

        myChart5.setOption({
            legend: {
                data: Object.keys(groupedData) // 假设每个区域的名称作为图例名称
            },
            xAxis: [
                {
                    type: 'category',
                    data: Object.keys(groupedData).map(function(area) {
                        return groupedData[area].map(function(item) {
                            return area + ':' + item.name; // 组合区域名称和productId作为X轴数据
                        });
                    })
                }
            ],
            series: Object.keys(groupedData).map(function(area) {
                return {
                    name: groupedData[area].map(function(item) {
                        return item.name;}),
                    type: 'bar',
                    data: groupedData[area].map(function(item) {
                        return item.value;
                    })
                };
            })
        });


    }, 'json');





    myChart1.setOption(option1);



</script>
<script>

    $("#main31").load("5.jsp")
    $("#main32").load("6.jsp")


</script>
</body>
</html>
